<!--经销商奖励页面-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item prop="period">
          <el-input v-model="dataForm.period" placeholder="请输入第几期"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
              v-model="createDateList"
              type="daterange"
              placeholder="请选择日期"
              format="yyyy 年 MM 月 dd 日"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="createCK"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
<!--        <el-form-item v-if="$hasPermission('api:userAgentAward:export')">-->
<!--          <el-button @click="exportHandle()" type="info">导出</el-button>-->
<!--        </el-form-item>-->
        <!--        <el-form-item>-->
        <!--          <el-button v-if="$hasPermission('api:userAgentAward:save')" type="primary"-->
        <!--                     @click="addOrUpdateHandle()">-->
        <!--            新增-->
        <!--          </el-button>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item>-->
        <!--          <el-button v-if="$hasPermission('api:userAgentAward:delete')" type="danger" @click="deleteHandle()">-->
        <!--            删除-->
        <!--          </el-button>-->
        <!--        </el-form-item>-->
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe highlight-current-row
                @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="period" label="期数" header-align="center" align="center" width="">
          <template slot-scope="{row}">
            <div>第{{row.period}}期</div>
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="经销商ID" header-align="center" align="center" width=""></el-table-column>
        <el-table-column prop="amount" label="奖励金额" header-align="center" align="center" width="" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div>{{formatNumber(row.amount)}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="startDate" label="开始时间" header-align="center" align="center" width=""></el-table-column>
        <el-table-column prop="endDate" label="结束时间" header-align="center" align="center" width=""></el-table-column>
        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center" width=""></el-table-column>
      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
                     layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <!--查看用户信息组件-->
      <com-user-list :visible.sync="showUser" :content="content"></com-user-list>
    </div>

  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './userRewardAddOrUpdate.vue'//未启用
import {formatNumber} from "@/utils";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/api/userAgentAward/page',
        getDataListIsPage: true,
        deleteURL: '/api/userAgentAward',
        deleteIsBatch: true,
        exportURL: '/api/userAgentAward/export'             // 导出接口，API地址
      },
      showUser:false,                 //是否显示用户信息
      content:{},                     //用户信息内容
      createDateList: [],               //创建时间数组
      dataForm: {
        id: '',                         //id
        userId:'',                      //经销商用户ID
        period: '',                     //期数：第几期
        amount: '',                     //奖励金额
        startDate: '',                  //开始时间
        endDate: '',                    //结束时间
        createDate: '',                 //创建时间
      },
    }
  },
  components: {
    AddOrUpdate
  },
  created() {

  },
  methods: {
    formatNumber,
    //显示用户信息
    showUserList(content){
      this.showUser=true;
      this.content= content;
    },
    /*创建时间选择*/
    createCK() {
      if (!this.createDateList){
        this.dataForm.startDate = ''
        this.dataForm.endDate = ''
        return
      }
      this.dataForm.startDate = this.createDateList[0]
      this.dataForm.endDate = this.createDateList[1]
    },
    //快速修改是否状态
    dropdownCk(e){
      const value = e.split('?')
      const item = {id:  value[0], helpStatus: Number(value[1])}
      // console.log(item)
      this.$http.put('/api/tbUserHelp', item).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.getDataList()
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
}
.demonstration {
  display: block;
}
</style>
